<!-- 所有当前正在进行的活动 -->
<template>
  <el-card>

    <div class="table">
      <!-- 表格 -->
      <el-table v-loading="loading" :data="activityList" style="width: 100%">
        <el-table-column v-for="item in activityTableLabel" :key="item.prop" :label="item.label" :prop="item.prop"
          :width="item.width" :sortable="item.sortable" />
        <!-- 活动资金 -->
        <el-table-column prop="fund" label="补贴资金 / 元">
          <template v-slot="scope">
            {{ scope.row.fund.toFixed(2) }}
          </template>
        </el-table-column>
        <!-- 活动满 -->
        <el-table-column prop="reach" label="活动满 / 元">
          <template v-slot="scope">
            {{ scope.row.reach.toFixed(2) }}
          </template>
        </el-table-column>
        <!-- 活动减 -->
        <el-table-column prop="reduce" label="活动减 / 元">
          <template v-slot="scope">
            {{ scope.row.reduce.toFixed(2) }}
          </template>
        </el-table-column>
        <!-- 活动当前余额 -->
        <el-table-column prop="balance" label="当前余额 / 元">
          <template v-slot="scope">
            {{ scope.row.balance.toFixed(2) }}
          </template>
        </el-table-column>
        <!-- 活动状态 -->
        <el-table-column :filters="[{ text: '进行中', value: 1 }, { text: '已失效', value: 0 }]" prop="status" label="活动状态"
          width="95">
          <template v-slot="scope">
            <el-tag size="small" v-if="scope.row.status === 1" type="success">进行中</el-tag>
            <el-tag size="small" v-else-if="scope.row.status === 0" type="danger">已失效</el-tag>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column fixed="right" label="操作" align="center">
          <template v-slot="scope">
            <el-button type="primary" size="small" @click="getactivityDetail(scope.$index)">
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination background layout="prev, pager, next" :total="config.total" class="pager mt-4"
        @current-change="changePage" :page-size="config.size" />
    </div>
  </el-card>

  <!-- 查看活动详情的模态框 -->
  <el-dialog v-model="dialogVisible" title="查看活动详情" width="50%" align-center>

    <!-- 商店详细信息展示表格 -->
    <el-descriptions :column="1" size="default" border v-loading="detail_loading">
      <el-descriptions-item min-width="130px" label="活动ID" label-align="center" align="center">
        {{ activityDetail.activity.activityId }}
      </el-descriptions-item>
      <el-descriptions-item label="活动名称" label-align="center" align="center">
        {{ activityDetail.activity.activityName }}
      </el-descriptions-item>
      <el-descriptions-item v-if="currentCategoryList.length == activityDetail.activity.categoryIdList.length"
        label="商品类型" label-align="center" align="center">
        <el-tag v-for="item in currentCategoryList" type="info" style="margin-right: 5px; margin-top:5px;">{{
          item.categoryName }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="补贴资金 / 元" label-align="center" align="center">
        {{ activityDetail.activity.fund.toFixed(2) }}
      </el-descriptions-item>
      <el-descriptions-item label="开始时间" label-align="center" align="center">
        {{ activityDetail.activity.startTime }}
      </el-descriptions-item>
      <el-descriptions-item label="结束时间" label-align="center" align="center">
        {{ activityDetail.activity.endTime }}
      </el-descriptions-item>
      <el-descriptions-item label="活动满减" label-align="center" align="center">
        满
        <span style="font-size: 18px; color: #2e64c2;">
          {{ activityDetail.activity.reach.toFixed(2) }}
        </span>
        元立减
        <span style="font-size: 18px; color: #2e64c2;">
          {{ activityDetail.activity.reduce.toFixed(2) }}
        </span>
        元
      </el-descriptions-item>
      <el-descriptions-item label="剩余资金 / 元" label-align="center" align="center" :span="2">
        {{ activityDetail.activity.balance.toFixed(2) }}
      </el-descriptions-item>
      <el-descriptions-item label="活动状态" label-align="center" align="center" :span="2">
        <el-tag size="large" v-if="activityDetail.activity.status === 1" type="success">进行中</el-tag>
        <el-tag size="large" v-else-if="activityDetail.activity.status === 0" type="danger">已失效</el-tag>
      </el-descriptions-item>
    </el-descriptions>

    <h1 style="font-size: 17px; margin-bottom: 10px; margin-top: 30px;">
      活动参与限制
      <span style="font-size: 13px; margin-left: 10px; color: #666666;">
        <font-awesome-icon :icon="['fas', 'circle-info']" />
        注：参与活动商店的注册资金、月销量、月销售额，需要大于下列要求值。
      </span>
    </h1>

    <el-descriptions :column="1" direction="vertical" size="default" border v-loading="detail_loading">
      <el-descriptions-item label="注册资金 / 元" align="center" :span="2">
        {{ activityDetail.activity.registeredCapital.toFixed(2) }}
      </el-descriptions-item>
      <el-descriptions-item label="月销量 / 件" align="center" :span="2">
        {{ activityDetail.activity.monthlySalesVolume }}
      </el-descriptions-item>
      <el-descriptions-item label="月销售额 / 元" align="center" :span="2">
        {{ activityDetail.activity.monthlySalesValue.toFixed(2) }}
      </el-descriptions-item>
    </el-descriptions>

    <!-- 底部的按钮 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="applyForActivity">申请参与</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { getCurrentInstance, onMounted, ref, reactive } from 'vue';
import { useStore } from 'vuex';

const store = useStore();
const { proxy } = getCurrentInstance();
const activityList = ref([]);
const loading = ref(false); // 控制表格加载遮罩窗是否出现
const detailIndex = ref(0);  // 当前查看详情的商品索引
const detail_loading = ref(false);  // 控制活动详情模态框中内容的加载
const currentCategoryList = ref([]);  // 当前打开的活动详情的类别
const dialogVisible = ref(false);  // 控制模态框的显示和隐藏

const activityDetail = reactive({
  activity: {
    "activityId": "",
    "activityName": "",
    "startTime": "",
    "endTime": "",
    "categoryIdList": [],
    "fund": 0,
    "reach": 0,
    "reduce": 0,
    "balance": 0,
    "registeredCapital": 0,
    "monthlySalesVolume": 0,
    "monthlySalesValue": 0.0,
    "status": 0
  }
});

const participationRequest = reactive({
  request: {
    "storeParticipateInActivityRequestId": "",
    "activityId": "",
    "storeId": store.state.store.manageStoreId,
    "initiateTime": "",
    "processTime": "",
    "status": 0,
    "info": ""
  }
})

const activityTableLabel = reactive([
  {
    prop: "activityId",
    label: "活动ID",
    width: 180,
    sortable: true,
  },
  {
    prop: "activityName",
    label: "活动名称",
    width: 180
  },
  {
    prop: "startTime",
    label: "开始时间",
    width: 180,
    sortable: true,
  },
  {
    prop: "endTime",
    label: "结束时间",
    width: 180,
    sortable: true,
  },
]);

const config = reactive({
  total: 0,  // 总的条目数
  current: 1,  // 当前页
  size: 15  // 一页的条目数
})

const getActivityList = async () => {
  // 发起请求
  let res = await proxy.$api.activity.getPageOfOngoingActivity({
    current: config.current,
    size: config.size,
  });
  // 更新表格数据
  activityList.value = res.data.activityList;
  config.total = res.data.total;
}

/**
 * 翻页
 * @param {number} page 目标页码
 */
const changePage = async (page) => {
  loading.value = true;
  // 更新当前页码
  config.current = page
  await getActivityList()
  loading.value = false;
}

/**
 * 获取当前活动详情对应的商品类别
 */
const getCurrentActivityCategory = async () => {
  currentCategoryList.value = [];
  for (let i = 0; i < activityDetail.activity.categoryIdList.length; ++i) {
    let ret = await proxy.$api.category.getCategory(activityDetail.activity.categoryIdList[i]);
    currentCategoryList.value.push(ret.data);
  }
}

/**
 * 获取活动详情，这里直接用索引号找到activityList中的信息即可
 * @param {number} index 
 */
const getactivityDetail = async (index) => {
  dialogVisible.value = true;
  detailIndex.value = index;
  activityDetail.activity = activityList.value[index];
  detail_loading.value = true;
  await getCurrentActivityCategory();
  detail_loading.value = false;
}

/**
 * 申请参与活动
 */
const applyForActivity = async () => {
  let res = await ElMessageBox.confirm(
    '一家商店只能参加一个活动，确定申请参与该活动吗？',
    '确认申请',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    });
  if (res === 'confirm') {
    detail_loading.value = true;
    participationRequest.request.activityId = activityDetail.activity.activityId;
    let ret = await proxy.$api.activity.applyForActivity(participationRequest.request).catch(error => {
      detail_loading.value = false;
      console.loc(error);
    })
    if (ret.status === 200)
      ElMessage.success({ showClose: true, message: "成功发起活动参与申请" });
    detail_loading.value = false;
  }
}

onMounted(async () => {
  // 开启加载遮罩
  loading.value = true;
  await getActivityList();
  // 关闭加载遮罩
  loading.value = false;
});
</script>

<style lang="less" scoped>
.new-btn {
  margin-bottom: 10px;
}

.table {
  position: relative;

  .pager {
    position: relative;
    bottom: -15px;
    justify-content: flex-end;
    margin-right: 15px;
    margin-top: 10px;
    margin-bottom: 15px;
  }
}
</style>